﻿<template>
  <v-flex class="xs12 mx-auto">
          <v-form v-model="valid" ref="basic">
            <v-layout row>
              <v-flex class="xs10 mx-auto">
                <v-text-field
                        label="歌手名字"
                        v-model="singerForm.name"
                        prepend-icon="mdi-emoticon-tongue"
                        required :rules="[v => !!v || '歌手名字不能为空']" hide-details/>
              </v-flex>
            </v-layout>
            <v-layout row >
              <v-flex xs10 mx-auto>
                <!--歌曲分类-----------------------------要写------------------------->
                <v-select
                        v-model="singerForm.location"
                        :items="place"
                        item-text="name"
                        item-value="id"
                        label="所属地区"
                        persistent-hint
                        prepend-icon="place"
                        return-object
                        single-line
                ></v-select>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs10 mx-auto>
              <v-menu
                      ref="menu"
                      v-model="menu"
                      :close-on-content-click="false"
                      :nudge-right="40"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                          v-model="singerForm.birthday"
                          label="生日"
                          prepend-icon="event"
                          readonly
                          v-on="on"
                  ></v-text-field>
                </template>
                <v-date-picker
                        ref="picker"
                        v-model="singerForm.birthday"
                        :max="new Date().toISOString().substr(0, 10)"
                        min="1950-01-01"
                        @change="save"
                ></v-date-picker>
              </v-menu>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs10 mx-auto>
                <v-radio-group v-model="singerForm.sex" row>
                  <v-radio label="男" value="1"></v-radio>
                  <v-radio label="女" value="0"></v-radio>
                </v-radio-group>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs10 mx-auto>
                <div style="margin-top: 10px;"></div>
                <v-label>简介</v-label>
                <el-input
                        type="textarea"
                        style=""
                        placeholder="请输入内容"
                        v-model="singerForm.introduction"
                        show-word-limit
                        size="medium"
                        :autosize="{ minRows: 3, maxRows: 3}"
                >
                </el-input>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs10 mx-auto>
                <div align="center" style="margin-top: 20px;">
                  <v-label>上传歌曲封面</v-label>
                  <v-upload v-model="singerForm.avator" :isAudio="false" :pic-width="320" :pic-height="180"
                            needSignature url="/signature?type=image"/>
                </div>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs10 mx-auto>
              <div align="center" style="margin-top: 20px;">
              <v-btn @click="clear" color="error">清空</v-btn>
              <v-btn @click="submit" color="primary">保存</v-btn>
              </div>
              </v-flex>
            </v-layout>
          </v-form>
        </v-flex>
</template>

<script>
export default {
  name: "singer-form",
  props: {
    oldSinger: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      menu: false,

      valid: false,
      singerForm: {},
      place: []    //地区
    }
  },
  methods: {

    save(date) {
      this.$refs.menu.save(date)
    },

    clear() {},
    submit() {
      if (!this.$refs.basic.validate) {
        this.$message.error("请先完成表单内容！");
      }

      this.$http({
        method: this.isEdit ? 'put' : 'post',
        url: "/singer/save",
        data: this.$qs.stringify(this.singerForm)
      }).then(() => {
        //成功，关闭窗口
        this.$emit("close");

        this.$message.success("保存成功")
      }).catch(error => {
        console.log(error)
        this.$message.error("保存失败！");
      })
    }
  },
  watch: {
    menu(val) {
      val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
    },
    oldSinger: {
      deep: true,
      handler() {
        // this.$emit("changeSongList", this.songListForm)
        console.log(this.oldSinger)
        this.singerForm = this.oldSinger
      }
    },
  }
}
</script>
<style>
  .tb_label{
    cursor: pointer;
    color: #20a0ff;
  }
</style>